<template>
	<div class="space"></div>

	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<!-- 头像 -->
			<van-row justify="center">
				<van-col>
					<van-field>
						<template #input>
							<van-uploader v-model="uploadData" reupload  max-count="1" class="avatar" />
						</template>
					</van-field>
				</van-col>
			</van-row>

			<van-field
				v-model="formData.nickname"
				name="nickname"
				label="昵称"
				placeholder="请输入昵称"
				:rules="rules.nickname" />
			<van-field
				v-model="formData.mobile"
				name="mobile"
				label="手机号"
				placeholder="请输入手机号"
				:rules="rules.mobile" />
			<van-field
				v-model="formData.email"
				name="email"
				label="邮箱"
				type="email"
				placeholder="请输入邮箱"
				:rules="rules.email" />
			<van-field
				v-model="formData.password"
				type="password"
				name="password"
				label="密码"
				placeholder="密码 不修改请留空"
				:rules="rules.password" />
			<van-field name="gender" label="性别">
				<template #input>
					<van-radio-group v-model="formData.gender" direction="horizontal" icon-size="16px">
						<van-radio name="0">保密</van-radio>
						<van-radio name="1">男</van-radio>
						<van-radio name="2">女</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field
				v-model="areaResult"
				readonly
				name="code"
				label="所在地区"
				placeholder="点击选择所在地区"
				@click="showArea = true" />

			<van-popup v-model:show="showArea" position="bottom">
				<van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" :model-value="areaCode" />
			</van-popup>
		</van-cell-group>

		<div style="margin: 16px">
			<van-button round block type="primary" native-type="submit"> 提交 </van-button>
		</div>
	</van-form>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
import { areaList } from '@vant/area-data';

const { proxy } = getCurrentInstance();

// 会员数据
const business = proxy.$cookies.get('business');
// 头像数据
const uploadData = ref([
	{
		url: business.avatar_text,
	},
]);
// 地区相关数据
const showArea = ref(false);
const areaResult = ref([business.province_text, business.city_text, business.district_text].filter(v=>v).join('/'));
const areaCode = ref(business.district || business.city || business.province);
const onConfirm = ({ selectedOptions }) => {
	showArea.value = false;

	areaResult.value = selectedOptions.map((item) => item.text).join('/');

	areaCode.value = selectedOptions.pop().value;
}
// 验证规则
const rules = {
	nickname: [{ required: true, message: '请填写昵称' }],
	mobile: [
		{ required: true, message: '请填写手机号' },
		{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' },
	],
	email: [
		{ required: true, message: '请填写邮箱' },
		{ pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误' },
	],
	password: [
		{
			validator(value){ 
				if (value && value.length < 6) {
					return '密码长度不能小于6';
				}
				return true
			}
		}
	]
};
// 表单数据
const formData = reactive({
	nickname: business.nickname,
	mobile: business.mobile,
	email: business.email,
	password: business.password,
	gender: business.gender,
});
// 提交回调
async function onSubmit() {
	const data = {
		id: business.id,
		nickname: formData.nickname,
		mobile: formData.mobile,
		email: formData.email,
		password: formData.password,
		gender: formData.gender,
	}

	if (areaCode.value) { 
		data.code = areaCode.value
	}

	if (uploadData.value.length > 0 && uploadData.value[0].url !== business.avatar_text) {
		data.avatar = uploadData.value[0].file
	}

	const result = await proxy.$UPLOAD({
		url: '/business/profile',
		params: data
	})

	if (result.code === 0) {
		proxy.$fail(result.msg);
		return false;
	}

	proxy.$router.push(result.url);

	proxy.$success({
		message: result.msg,
		duration: 1000,
	});
}
</script>

<style scoped>
.avatar {
	--van-uploader-size: 120px;
	--van-uploader-border-radius: 120px;
}
</style>
